<template>
  <div
    :class="{
      'message-container-left': left,
      'message-container-right': !left,
    }"
    v-if="messageShow"
  >
    <head-img :ID="msgData.userID"></head-img>
    <div class="name-content">
      <div class="name" v-show="nameShow">{{ $store.state.userList[msgData.userID].name }}</div>
      <div class="bubble">
        <div
          :class="{
            'triangle-left': left,
            'triangle-right': !left,
          }"
        ></div>
        <div class="rect">{{ msgData.info }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import HeadImg from "@/components/HeadImg";
export default {
  data() {
    return {
    };
  },
  components:{
      'head-img':HeadImg
  },
  props: {
    msgData: {
      type: Object,
    }
  },
  computed: {
    left() {
      if (this.msgData.userID == 0) {
        return false;
      } else return true;
    },
    messageShow() {
      if (this.msgData.info) {
        return true;
      } else return false;
    },
    nameShow(){
      if(this.msgData.userID==0)return false
      if(this.$store.state.dialogueType=='single')return false
      return true
    }
  },
  mounted() {},
};
</script>
<style lang="scss" >
@import "../../assets/scss/message.scss";
$name-padding: 4px;
$triangle-size: -13px;
.message-container-left {
  @include message-container;
  padding-right: $head-img-size + 20px;
}
.message-container-right {
  @include message-container;
  flex-direction: row-reverse;
  padding-left: $head-img-size + 20px;
  .name {
    text-align: right;
    padding-right: $name-padding;
  }
  .rect {
    background-color: rgb(149, 236, 105);
  }
}
.head-img {
  @include headimg;
}
.name-content {
  display: flex;
  flex-direction: column;
  padding-bottom: 0px;
}
.name {
  display: block;
  padding-left: $name-padding;
  font-size: 12px;
  line-height: 18px;
  position: relative;
  top: -2px;
  color: rgb(120, 120, 120);
}
.bubble {
  position: relative;
}
.rect {
  background-color: white;
  @include rect;
}
.triangle-left {
  @include triangle;
  border-color: transparent white transparent transparent;
  left: $triangle-size;
}
.triangle-right {
  @include triangle;
  border-color: transparent transparent transparent rgb(149, 236, 105);
  right: $triangle-size;
}
</style>